<template>
  <div class="order-details">
    <head-top head-title="具体详情" go-back="true"></head-top>
    <div class="order-details-box">
      <div class="details_top">
        <div class="help_title">
          <img :src="details.head_pic" alt="">
          <div class="help_msg">
            <div class="msg_top">
              <p>{{details.real_name}}</p>
              <p>
                <span ref="phone">{{details.phone}}</span>
              </p>
            </div>
            <div class="msg_bottom">
              <p>{{details.district}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="details_content">
        <h2>{{details.title}}</h2>
        <p>截止时间：{{details.end_at}}</p>
        <p>查验地址：{{details.address}}</p>
        <div class="describe">
          <p>{{details.describe}}</p>
        </div>
        <div class="release_time">
          <button>{{details.category_name}}</button>
          <span>发布时间：{{details.created_at}}</span>
        </div>
      </div>
      <div class="base_info">
        <h3>订单基本信息</h3>
        <ul>
          <li>接单人姓名：{{orderMeg.real_name}}</li>
          <li><span>联系方式：</span>{{orderMeg.phone}}</li>
          <li><span>接单时间：</span>{{orderMeg.created_at}}</li>
          <li v-if="orderMeg.status===0"><span>订单状态：</span>订单已被取消</li>
          <li v-if="orderMeg.status===1"><span>订单状态：</span>已完成</li>
          <li v-if="orderMeg.status===2"><span>订单状态：</span>待审核</li>
          <li v-if="orderMeg.status===3"><span>订单状态：</span>接单已同意但订单未完成</li>
          <li v-if="orderMeg.status===4"><span>订单状态：</span>订单已完成但发布者未确认</li>
          <li><span>订单编号：</span>{{orderMeg.order_id}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../../../components/header/Header'
  import { orderDetails } from '../../../api/MyOrder'

  export default {
    name: 'OrderDetails',
    data () {
      return {
        orderMeg: {}, // 订单信息
        details: {} // 详情信息
      }
    },
    created () {
      this._orderDetails()
    },
    methods: {
      _orderDetails () {
        orderDetails(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.details = res.data.work
            this.orderMeg = res.data.order
            // console.log(this.orderMeg)
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .order-details {
    padding-top: 40px;
    .order-details-box {
      .details_top {
        padding: 10px;
        .help_title {
          height: 65px;
          border-bottom: 1px solid #d9d9d9;
          img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            float: left;
            margin-top: 10px;
          }
          .help_msg {
            float: right;
            width: 83%;
            height: 65px;
            .msg_top {
              width: 100%;
              height: 33px;
              p:first-child {
                float: left;
                font-size: 15px;
                color: #292929;
                line-height: 33px;
              }
              p:last-child {
                float: right;
                span {
                  font-size: 13px;
                  line-height: 33px;
                  color: #2585d0;
                }
              }
            }
            .msg_bottom {
              width: 100%;
              height: 32px;
              clear: both;
              p {
                float: left;
                line-height: 24px;
                font-size: 13px;
                color: #999999;
              }
            }
          }
        }
      }
      .details_content {
        padding: 10px;
        border-bottom: 10px solid #f2f2f2;
        h2 {
          font-weight: normal;
          font-size: 15px;
          color: #292929;
        }
        p {
          font-size: 14px;
          padding-top: 10px;
          color: #666666;
        }
        .describe {
          border-bottom: 1px solid #d9d9d9;
          padding-bottom: 10px;
          p {
            color: #292929;
            font-size: 14px;
            line-height: 20px;
          }
        }
        .release_time {
          margin-top: 10px;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          align-items: center;
          justify-content: space-between;
          button {
            padding: 5px;
            background: #ffffff;
            border: 1px solid #2585d0;
            color: #2585d0;
          }
          span {
            font-size: 14px;
            color: #999999;
          }
        }
      }
      .base_info {
        padding: 10px;
        h3 {
          font-size: 15px;
          color: #292929;
          font-weight: normal;
          border-bottom: 1px solid #d9d9d9;
          padding: 5px 0 10px 0;
        }
        ul {
          li {
            font-size: 14px;
            color: #292929;
            padding-top: 10px;
            span {
              letter-spacing: 4px;
            }
          }
        }
      }
    }
  }
</style>
